<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header" @click="backChange">
        <el-icon size="20">
          <ArrowLeft />
        </el-icon>
        <span>官方素材</span>
      </div>
    </template>

    <el-input
      :prefix-icon="Search"
      v-model="keywords"
      placeholder="请输入素材名称"
      style="width: 320px"
      clearable
      @clear="handleSearch"
    >
      <template #append>
        <span class="search" @click="handleSearch">搜索</span>
      </template>
    </el-input>

    <div class="container">
      <div class="list" v-for="(item, index) in dataList" :key="item.id">
        <div
          class="pic"
          :style="{
            backgroundImage: `url(${item.h5PictureUrl})`,
            backgroundPosition: '35% center',
            backgroundSize: 'cover',
            backgroundRepeat: 'no-repeat',
          }"
        >
          <!-- <img :src="item.h5PictureUrl" /> -->
          <div class="btn">
            <div class="btnBox">
              <div class="yulan" @click="previewBtn(index)">预览</div>

              <div class="yulan" @click="addbtn(item, index)">
                加入我的Banner
              </div>
            </div>
          </div>
        </div>
        <span class="txt">{{ item.name }}</span>
      </div>
    </div>

    <el-dialog
      v-model="dialogTableVisible"
      title="预览效果"
      width="800"
      :destroy-on-close="true"
      custom-class="library-preview-img"
    >
      <div class="dialog-tytyt">
        <div class="bannerBox">
          <el-carousel
            :autoplay="false"
            arrow="always"
            indicator-position="none"
            ref="reference"
            :initial-index="current"
          >
            <div v-for="(item, index) in dataList" :key="index">
              <el-carousel-item style="display: flex">
                <div class="bannerLeft">
                  <div class="padding">
                    <p>电脑端效果</p>
                    <img :src="item.pcPictureUrl" />
                  </div>
                </div>
                <div class="bannerRight">
                  <p>移动端效果</p>
                  <img :src="item.h5PictureUrl" />
                </div>
              </el-carousel-item>
              <div class="myBannerBtn">
                <el-button type="primary" @click="addbtn(item)"
                  >加入我的Banner</el-button
                >
              </div>
            </div>
          </el-carousel>

          <div class="pre">
            <div class="page">
              <div class="pageLeft" @click="pre">上一页</div>
              <div class="pageRight" @click="next">下一页</div>
            </div>
            <div class="illustrate">
              可使用快捷键 "<Back class="icon" /><Right class="icon" />" 查看
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </el-card>
</template>
<script setup>
import { Search } from '@element-plus/icons-vue';
import { ref, nextTick, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { officialBanner, bannerAdd } from '@/api/banner/index';
import { ElMessage, ElCarousel, ElCarouselItem } from 'element-plus';

const router = useRouter();

const keywords = ref('');

let reference = ref(null);
const dataList = ref([]);

const dialogTableVisible = ref(false);
const params = ref({
  type: 0,
  page: 1,
  pageSize: 100,
});
const current = ref(0);
function backChange() {
  router.push({ path: 'advertisement' });
}
const intiList = () => {
  officialBanner({ ...params.value, search: keywords.value }).then((res) => {
    const { data } = res;
    dataList.value = data.data;
  });
};
const addbtn = (item) => {
  dialogTableVisible.value = false;

  let paramsAdd = ref({
    id: 0,
    storeId: JSON.parse(localStorage.getItem('userDateInfo'))?.storeId,
    name: item.name,
    type: 3,
    status: 1,
    pc_img_url: item.pcPictureUrl,
    m_img_url: item.h5PictureUrl,
    pc_url: item.pcUrl,
    m_url: item.h5Url,
  });

  bannerAdd(paramsAdd.value).then((res) => {
    ElMessage({
      message: res.msg,
      type: 'success',
    });
  });
};
const handleSearch = () => {
  intiList();
};
const previewBtn = (index) => {
  nextTick(() => {
    reference.value.setActiveItem(index);
  });
  current.value = index;
  dialogTableVisible.value = true;
};
// 上一页
const pre = () => {
  reference.value.prev();
};

const next = () => {
  reference.value.next();
};
const handleKeyDown = (event) => {
  if (event.key === 'ArrowLeft') {
    reference.value.prev();
  } else if (event.key === 'ArrowRight') {
    reference.value.next();
  }
};
onMounted(() => {
  window.addEventListener('keydown', handleKeyDown);

  intiList();
});

onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown);
});
</script>
<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
  display: none;
}

:deep(.el-carousel) {
  width: 760px;
  height: 140%;
}

:deep(.el-dialog) {
  overflow: none !important;
  height: 440px;
}

:deep(.el-carousel__item) {
  height: 300px;
}

:deep(.el-carousel__arrow--left) {
  left: 42%;
  transform: translateX(-50%);
  color: #000;
  font-size: 16px;
  background: #fff;
}

:deep(.el-carousel__arrow--right) {
  left: 60%;
  color: #000;
  font-size: 16px;
  background: #fff;
  transform: translateX(-50%);
}

:deep(.el-carousel__item[data-v-f290cde2]:nth-child(2n + 1)) {
  background: none;
}
:deep(.el-input-group__append) {
  background: #165dff !important;
}
:deep(.el-input__wrapper) {
  border: none !important;
}
.search {
  cursor: pointer;
}
:v-deep(.el-input-group--append > .el-input__wrapper) {
  border: 1px solid #165dff !important;
  height: 30px !important;
  margin-top: 1px !important;
  border-radius: none !important;
}
.dialog-tytyt {
  .bannerBox {
    position: relative;
    background: #f7f8fa;
    border-radius: 4px;
    height: 320px;

    .myBannerBtn {
      position: absolute;
      right: 20px;
      bottom: -65px;
    }

    .bannerLeft {
      margin: 20px;
      width: 540px;
      height: 100%;
      margin-right: 20px;

      p {
        color: #86909c;
        margin-bottom: 5px;
        height: 100%;
      }

      img {
        width: 540px;
        height: 250px;
      }
    }

    .bannerRight {
      margin: 20px 0;
      width: 200px;

      p {
        color: #86909c;
        margin-bottom: 5px;
      }

      img {
        max-width: 160px;
        height: 250px;
        // object-fit: cover;
      }

      // background: yellow;
    }
  }

  .pre {
    position: absolute;
    // bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    color: rgb(255, 255, 255);
    font-size: 12px;

    .page {
      display: flex;
      margin-top: 10px;
      cursor: pointer;
      .pageLeft {
        margin-right: 100px;
      }
    }

    .illustrate {
      margin-top: 10px;
      color: rgb(255, 255, 255);
      font-size: 14px;
      .icon {
        width: 1em;
        height: 1em;
      }
    }
  }
}

.box-card {
  margin: 20px;
  height: 100vh;

  .card-header {
    display: flex;
    cursor: pointer;
    align-items: center;
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;
  }

  .banner_search {
    margin-bottom: 20px;

    .w-50 {
      width: 237px;
    }

    .el_btn {
      // margin-left: -5px;
      height: 32px;
      border-radius: 0;
      background: #165dff;
    }
  }

  .container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 20px 20px;
  }

  .list {
    // background-color: skyblue;
    margin-top: 15px;
    background: #f7f8fa;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    width: 100%;
    .pic:hover {
      opacity: 1;
      background: rgba(0, 0, 0, 0.65);
    }

    .pic:hover .btn {
      // position: absolute;
      z-index: 9999;
      display: block;
      // padding: 0 12px;
    }

    .pic {
      position: relative;
      display: flex;
      img {
        width: 100%;
      }
      &::after {
        content: '';
        width: 100%;
        margin-bottom: 42.56%;
        display: inline-block;
      }
      img:hover {
        display: block;
        cursor: pointer;
        position: relative;
        z-index: 100;
      }

      .btn {
        height: 100%;
        width: 100%;
        position: absolute;
        display: flex;
        flex-wrap: wrap;
        top: 0;
        left: 0;
        display: none;
        // z-index: 100;
        background: #000;
        opacity: 0.9;
        .btnBox {
          display: flex;
          flex-wrap: wrap;
          justify-content: space-around;
          align-items: center;
          height: 100%;
        }
        .yulan {
          height: 24px;
          box-sizing: border-box;
          background: #fff;
          padding: 5px 12px;
          border-radius: 4px;
          cursor: pointer;
          font-size: 14px;
          line-height: 14px;
          // padding-top: 2px;
        }

        .yulan:hover {
          color: #165dff;
        }

        .banner:hover {
          color: #165dff;
        }

        .banner {
          // display: inline-block;
          height: 24px;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          background: #fff;
          border-radius: 4px;
          margin: 5px 12px;
          cursor: pointer;
          font-size: 14px;
          line-height: 24px;
        }
      }
    }

    .txt {
      display: inline-block;
      width: 100%;
      text-align: left;
      line-height: 50px;
      padding-left: 20px;
      overflow: hidden;
      font-size: 14px;
      /* 确保超出容器的文本被隐藏 */
      white-space: nowrap;
      /* 防止文本换行 */
      text-overflow: ellipsis;
      /* 超出部分显示省略号 */
      background: #f7f8fa;
    }
  }
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

// .el-carousel__item:nth-child(2n) {
//   // background-color: #99a9bf;
// }

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
<style lang="scss">
.dialog-tytyt .el-carousel__item {
  overflow: none !important;
}

.dialog-tytyt .el-dialog .el-dialog__body {
  overflow: visible !important;
  overflow-y: none !important;
  max-height: 0 !important;
}
.library-preview-img {
  .el-dialog__body {
    max-height: none !important;
    overflow: unset !important;
  }
}
</style>
<style lang="scss">
.box-card {
  .el-dialog .el-dialog__body {
    overflow: unset;
    overflow-y: unset;
  }
  .el-carousel__arrow {
    bottom: 0;
    top: unset;
  }
}
</style>
